<template>
	<view class="fx_box">
		<Nvagatsmy :images="images"></Nvagatsmy>

		<view class="fx_topcurd">
			<view class="fx_topleft">
				<view class="fx_text">
					累计收益（积分）
				</view>
				<view class="fx_textbtms">
					288.00
				</view>
			</view>
			<view class="fx_topright">
				<image style="width: 30rpx;height: 30rpx;margin-top: 100rpx;" src="https://img.jingkakeji.com/img/static/lujinfx.png" mode=""></image>
			</view>
		</view>
		<view class="tuiguangis">
			<image style="width: 100%;height: 100%;" src="https://img.jingkakeji.com/img/static/tuiguangs.png" mode=""></image>
		</view>
		<view class="tuiguangisd">
			<view class="tuijian_left">
				<p style="margin-left: 40rpx;">推荐人</p>
			</view>
			<view class="tuijian_right">
				<image style="width: 50rpx;height: 50rpx;margin-left: 20rpx;" src="https://img.jingkakeji.com/img/static/zuthree.png" mode=""></image>
				<view class="tuijian_yh">
					用户123125423
				</view>

			</view>
		</view>
		<view class="tuijian_curd">
			<view class="tuijian_curdlist">
				<view class="curdlist_left">
					<view class="left_lists" v-for="(item,index) in datas" :key="index" @click="onlists(index)"
						:class="{ active: activeIndex === index }">
						{{item.title}}
					</view>
				</view>
				<view class="curdlist_right">
					<view class="sous">
						<input style="width: 180rpx;height: 100%;" type="text" placeholder="搜索用户id" />
						<image style="width: 30rpx;height: 30rpx;margin: 20rpx;" src="https://img.jingkakeji.com/img/static/lujinsearch.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<!-- 新增内容区域 -->
			<view class="list-container">
				<!-- 列表标题 -->
				<view class="list-header">
					<text class="list-title">数据明细</text>
				</view>

				<!-- 列表内容 -->
				<view class="list-content">
					<view class="list-item" v-for="(item, index) in listData" :key="index"
						:style="{ backgroundColor: index % 2 === 0 ? '#F8F8F8' : '#FFFFFF' }">
						<view class="item-header">
							<text class="item-title">{{ item.title }}</text>
							<text class="item-value">{{ item.value }}</text>
						</view>
						<view class="item-body">
							<text class="item-desc">{{ item.desc }}</text>
							<text class="item-time">{{ item.time }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="btms">
			
		</view> -->
		<Tabbars></Tabbars>

	</view>

</template>

<script>
	import Nvagatsmy from "../../Component/navgatsmy/navgatsmy.vue"
	import Tabbars from "../../Component/Tabbars/Tabbars.vue"
	export default {
		data() {
			return {
				images: "https://img.jingkakeji.com/img/static/fenxiang.png",
				listData: [{
						title: "今日收益",
						value: "+28.50",
						desc: "来自用户A的推广收益",
						time: "2023-07-15 10:30"
					},
					{
						title: "昨日收益",
						value: "+56.20",
						desc: "来自用户B、用户C的推广收益",
						time: "2023-07-14 23:59"
					},
					{
						title: "本周收益",
						value: "+288.00",
						desc: "本周累计推广收益，包含多个用户的贡献",
						time: "2023-07-09 ~ 2023-07-15"
					},
					{
						title: "本月收益",
						value: "+1024.80",
						desc: "本月累计推广收益，团队规模扩大带来的增长",
						time: "2023-07-01 ~ 2023-07-15"
					}
				],
				datas: [{
						title: "今日"
					},
					{
						title: "昨日"
					},
					{
						title: "本周"
					}
				],
				activeIndex: 0 // 初始选中第一个
			}
		},
		components: {
			Tabbars,
			Nvagatsmy
		},
		methods: {
			switchContent(index) {
				this.activeContentIndex = index;
			},
			onlists(index) {
				this.activeIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	.fx_box {
		width: 100vw;
		height: 100vh;
		background-color: #DAD8EE;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;
	}

	.fx_topcurd {
		width: 95%;
		height: 220rpx;
		background: url("https://img.jingkakeji.com/img/static/topcurd.png");
		margin: 0;
		padding: 0;
		/* 设置背景图片 */
		// background-image: url('your-image.jpg');

		/* 确保图片不平铺 */
		background-repeat: no-repeat;

		/* 让图片居中显示 */
		background-position: center;

		/* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
		background-size: cover;

		/* 固定背景，滚动页面时背景不动 */
		// background-attachment: fixed;
		// position: fixed;
		margin-top: 20rpx;
		display: flex;
	}

	.fx_topleft {
		width: 50%;
		height: 100%;
	}

	.fx_topright {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fx_text {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		color: #DAD8EE;
		margin-top: 50rpx;
	}

	.fx_textbtms {
		width: 100%;
		text-align: center;
		font-size: 50rpx;
		color: #ffffff;
		margin-top: 10rpx;
	}

	.tuiguangis {
		width: 95%;
		height: 70rpx;
		margin-top: 20rpx;
	}

	.tuiguangisd {
		width: 95%;
		height: 70rpx;
		margin-top: 20rpx;
		background: #ECEBF6;
		border: 1px dashed #CF9A9C;
		display: flex;
	}

	.tuijian_left {
		width: 50%;
		height: 100%;
		line-height: 70rpx;
		font-size: 25rpx;
	}

	.tuijian_right {
		width: 50%;
		height: 100%;
		line-height: 70rpx;
		display: flex;
		align-items: center;

	}

	.tuijian_yh {
		font-size: 20rpx;
	}

	.tuijian_curd {
		width: 95%;
		height: 1100rpx;
		margin-top: 20rpx;
		background: url("https://img.jingkakeji.com/img/static/lujinshe.png");
		margin: 0;
		padding: 0;

		/* 设置背景图片 */
		// background-image: url('your-image.jpg');

		/* 确保图片不平铺 */
		background-repeat: no-repeat;

		/* 让图片居中显示 */
		background-position: center;

		/* 关键属性：让图片覆盖整个容器，保持比例，可能裁剪部分图片 */
		background-size: cover;

		/* 固定背景，滚动页面时背景不动 */
		// background-attachment: fixed;
		// position: fixed;
	}

	.tuijian_curdlist {
		width: 100%;
		height: 100rpx;
		display: flex;
	}

	.curdlist_left {
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		/* 平均分配，首尾不留间隔 */
	}

	.left_lists {
		width: 100rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		border: 1px solid #D1D5F6;
		flex: 1;
		/* 每个盒子平均分配剩余空间 */
		margin: 10rpx 10px;
		/* 添加左右间隔 */
		transition: background-color 0.3s;
		/* 添加过渡效果 */
	}

	.left_lists.active {
		background: #7463DB;
		color: #FFFFFF;
		/* 选中字体白色 */
	}

	.curdlist_right {
		width: 40%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sous {
		width: 250rpx;
		height: 70rpx;
		margin-top: 10rpx;
		border: 1px solid #D1D5F6;
		display: flex;
	}

	.btms {
		width: 100%;
		height: 200rpx;
	}

	/* 新增列表样式 */
	.list-container {
		width: 95%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.list-header {
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.list-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.list-content {
		display: flex;
		flex-direction: column;
	}

	.list-item {
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		transition: all 0.3s;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.item-value {
		font-size: 28rpx;
		color: #4A6EF5;
		font-weight: bold;
	}

	.item-body {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.item-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.item-time {
		font-size: 22rpx;
		color: #999;
		align-self: flex-end;
	}

	/* 斑马纹效果 */
	.list-item:nth-child(even) {
		background-color: #F8F8F8;
	}

	/* 响应式调整 */
	@media (max-width: 480px) {
		.list-item {
			padding: 20rpx;
		}

		.item-title,
		.item-value {
			font-size: 26rpx;
		}

		.item-desc {
			font-size: 22rpx;
		}

		.item-time {
			font-size: 20rpx;
		}
	}
</style>